<html layout:decorate="~{default/layout}" xmlns:layout="http://www.w3.org/1999/xhtml">
<body>
<div layout:fragment="content">
    <style>
        .modal-dialog {
            width: 700px !important;
        }
    </style>
    <div class="main-content-inner">
        <div class="breadcrumbs ace-save-state" id="breadcrumbs">
            <ul class="breadcrumb">
                <li>
                    <i class="ace-icon fa fa-home home-icon"></i>
                    <a href="#">主页</a>
                </li>
                <li class="active">系统报告</li>
            </ul>
        </div>

        <div class="search_condition_block">
            <div style="margin-top: 5px">
                <label style="width: 80px;margin-left: 15px">分&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;类:</label>
                <div id="reportCategory" class="btn-group btn-group-sm" role="group" aria-label="...">
                    <button type="button" class="btn btn-success active">全部</button>
                    <button type="button" class="btn btn-success">月报</button>
                    <button type="button" class="btn btn-success">年报</button>
                </div>
            </div>
        </div>

        <div class="main-body">
            <table id="dataTable" data-url="/report/report_data" data-page-list=[]  data-striped="true" data-pagination="true" data-page-size="15" data-cache="false">

            </table>
        </div>

        <style>
            .btn-group-sm .active{
                background-color: #006dcc!important;
                border-color: #006dcc!important;
            }
        </style>
        <script>

            $('#reportCategory button').click(function (e) {
                $(this).addClass('active').siblings().removeClass('active');
            });

            //table字段
            var dataFormat = [{
                title: '序号',
                align: 'center',
                formatter : function (value, row, index) {
                    return index + 1;
                }
            },{
                field: 'name',
                title: '名称',
                align: 'center'
            },{
                field: 'reportCategory',
                title: '分类',
                align: 'center',
                formatter:function(value,row,index){
                    if(value == 1){
                        return '<p style="color: #00BE67">月报</p>';
                    }
                    if(value == 2){
                        return '<p style="color: #006dcc">年报</p>';
                    }
                }
            },{
                field: 'createTime',
                title: '生成时间',
                align: 'center',
                formatter : function(value, row, index){
                    return formatTimeStrap(value);
                }
            },{
                field: 'operate',
                title: '操作',
                align: 'center',
                formatter : function(value, row, index){
                    var html =  '<a onclick="showDetail();">查看详情</a>';
                    return [html].join('');
                }
            }];

            //初始化table
            window.onload = function () {
                getTable(dataFormat,"dataTable");
            };

            function showDetail(id) {

                var url = "/report/report_detail";

                if (id != null) {
                    url += "?id=" + id;
                }
                $("#modal").modal({
                    remote : url
                });
            }

        </script>
    </div>
</div>
</body>
</html>